<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wclassth=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../font/iconfont.css">
    <script src="../js/register.js"></script>
    <style>
        .createCode {
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label for="">确&emsp;认:</label>
            <input type="text" class="repwd">
            <span class="repwd_span"></span>
        </p>
        <p>
            <label for="">验证码:</label>
            <input type="text" class="code">
            <span class="createCode">a1b2</span>
            <span class="code_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </div>
    <!-- llllllllllllIIIIIIIIIIIIII -->
</body>
<script>
    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头

    // 判断的流程  从易到难的顺序
    // a. 长度  6-12位
    // b. 不能以数字开头  => 判断第一个字符  isNaN
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _ $ 组成   6-12位

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111a  a1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA                      强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3

    // 确认密码
    // 和密码相同   => 两次密码输入不一致

    // 验证码  => 封装一个方法可以随机生成四位验证码 (0-9 a-z A-Z )
    // 1. 页面加载时,随机生成四个不重复的验证码 (0-9 a-z A-Z )   => createCode
    // 2. 点击 验证码 进行切换
    // 3. 验证码输入判断  (输入的  随机生成的  保持一致) 

</script>
<script>

    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];
    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];
    var repwdInp = document.getElementsByClassName("repwd")[0];
    var repwdSpan = document.getElementsByClassName("repwd_span")[0];
    var codeInp = document.getElementsByClassName("code")[0];
    var createCodeSpan = document.getElementsByClassName("createCode")[0];
    var codeSpan = document.getElementsByClassName("code_span")[0];

    var btn = document.getElementsByClassName("btn")[0];

    // 页面加载时随机验证码
    createCodeSpan.innerText = randCode();
    createCodeSpan.onclick = function () {
        createCodeSpan.innerText = randCode();
    }


    btn.onclick = function () {
        var user = userInp.value;
        var pwd = pwdInp.value;
        var repwd = repwdInp.value;
        var code = codeInp.value;

        // 用户:
        // a.长度
        if (user.length >= 6 && user.length <= 12) {
            // console.log("len ok!");

            // b 首字母
            var firstChar = user.charAt(0);
            if (isNaN(firstChar)) {

                // c 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)

                var flag = true; // 假设都是合法字符  => 找到一个非法的即可推翻假设
                for (var i = 0; i < user.length; i++) {
                    var char = user.charAt(i);
                    if (!normalList.includes(char)) {
                        //  !normalList.includes(char) == true => normalList.includes(char) == false
                        flag = false;
                        break;
                    }
                }

                if (flag) {
                    userSpan.innerHTML = '<i class="iconfont icon-Selected"></i>';
                    userSpan.style.fontSize = "12px";
                    userSpan.style.color = "green";
                } else {
                    userSpan.innerText = "用户名由数字、字母、下划线、$组成";
                    userSpan.style.fontSize = "12px";
                    userSpan.style.color = "red";
                }

            } else {
                userSpan.innerText = "用户名不能以数字开头";
                userSpan.style.fontSize = "12px";
                userSpan.style.color = "red";
            }

        } else {
            userSpan.innerText = "用户名需要在6-12位之间";
            userSpan.style.fontSize = "12px";
            userSpan.style.color = "red";
        }

        // 密码
        // a. 长度
        var isPwdOk = false;  //密码格式是否正确
        if (pwd.length >= 6 && pwd.length <= 12) {
            // console.log("len ok!");

            // b 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)

            var flag = true; // 假设都是合法字符  => 找到一个非法的即可推翻假设
            for (var i = 0; i < pwd.length; i++) {
                var char = pwd.charAt(i);
                if (!normalList.includes(char)) {
                    //  !normalList.includes(char) == true => normalList.includes(char) == false
                    flag = false;
                    break;
                }
            }

            if (flag) {


                // c 密码强度

                var isExistNum = false;  //假设不存在  => 找到一个就是有
                var isExistBig = false;  //假设不存在  => 找到一个就是有
                var isExistSmall = false;  //假设不存在  => 找到一个就是有
                var isExistSpe = false;  //假设不存在  => 找到一个就是有
                for (var i = 0; i < pwd.length; i++) {
                    var char = pwd.charAt(i);
                    if (numList.includes(char)) {
                        isExistNum = true;
                    }
                    if (bigList.includes(char)) {
                        isExistBig = true;
                    }
                    if (smallList.includes(char)) {
                        isExistSmall = true;
                    }
                    if (speList.includes(char)) {
                        isExistSpe = true;
                    }
                }

                var level = isExistNum + isExistBig + isExistSmall + isExistSpe;
                console.log(level);

                switch (level) {
                    case 1:
                        pwdSpan.innerHTML = '密码强度:弱';
                        break;
                    case 2:
                        pwdSpan.innerHTML = '密码强度:中';
                        break;
                    case 3:
                        pwdSpan.innerHTML = '密码强度:强';
                        break;
                    case 4:
                        pwdSpan.innerHTML = '密码强度:超强';
                        break;
                }


                pwdSpan.style.fontSize = "12px";
                pwdSpan.style.color = "green";


                isPwdOk = true;






            } else {
                pwdSpan.innerText = "密码由数字、字母、下划线、$组成";
                pwdSpan.style.fontSize = "12px";
                pwdSpan.style.color = "red";
            }


        } else {
            pwdSpan.innerText = "密码需要在6-12位之间";
            pwdSpan.style.fontSize = "12px";
            pwdSpan.style.color = "red";
        }


        if (isPwdOk) {
            if (pwd == repwd) {
                repwdSpan.innerHTML = '<i class="iconfont icon-Selected"></i>';
                repwdSpan.style.fontSize = "12px";
                repwdSpan.style.color = "green";
            } else {
                repwdSpan.innerText = "两次输入不一致";
                repwdSpan.style.fontSize = "12px";
                repwdSpan.style.color = "red";
            }
        } else {
            repwdSpan.innerText = "密码格式有误,请先修改密码";
            repwdSpan.style.fontSize = "12px";
            repwdSpan.style.color = "red";
        }


        if (code) { // code != ""  => 有内容
            if (code.toLowerCase() == createCodeSpan.innerText.toLowerCase()) {
                codeSpan.innerHTML = '<i class="iconfont icon-Selected"></i>';
                codeSpan.style.fontSize = "12px";
                codeSpan.style.color = "green";
            } else {
                codeSpan.innerText = "验证码不一致";
                codeSpan.style.fontSize = "12px";
                codeSpan.style.color = "red";
            }
        } else {
            codeSpan.innerText = "请先输入验证码";
            codeSpan.style.fontSize = "12px";
            codeSpan.style.color = "red";
        }

    }



</script>


</html>